<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">确认学分</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 栅格 -->
            <el-row :gutter="20">
                <!-- 栅格 -->
                <el-row :gutter="20">
                    <el-col :span="14">
                        <span class="marginright">累计学习时长：00:00</span>
                        <span class="marginright">累计已完成学分：0</span>
                        <el-button type="primary" size="mini" @click="Confirmedcredits">确认学分</el-button>
                    </el-col>
                    <el-col :span="10">
                        <el-input placeholder="关键词" v-model="Userdata" class="input-with-select" clearable>
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </el-row>
            <!-- 表格 -->
            <el-table :data="UsertableData" style="width: 100%">
                <el-table-column label="用户名">
                </el-table-column>
                <el-table-column label="课程标题">
                </el-table-column>
                <el-table-column label="已学时长">
                </el-table-column>
                <el-table-column label="已学到">
                </el-table-column>
                <el-table-column label="学分">
                </el-table-column>
                <el-table-column label="状态">
                </el-table-column>
                <el-table-column label="学习时间">
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="Userlist._page" :page-sizes="[10, 20, 30, 40]" :page-size="Userlist._size" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
        <!-- 对话框 -->
        <el-dialog title="确认学分" :before-close="Closethewindow" :visible.sync="dialogVisible" width="70%">
            <el-form :model="formdata" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="累计时长:">
                    <div>00:00</div>
                </el-form-item>
                <el-form-item label="累计学分:">
                    <div>0</div>
                </el-form-item>
                <el-form-item label="考核结语:" prop="epilogue">
                    <el-input type="textarea" :rows="2" placeholder="请输入考核结语" v-model="formdata.epilogue">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="Closethewindow">取 消</el-button>
                <el-button type="primary" @click="addNoticefun">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { GetLearnList, AddLearn } from '../api/Learn.js'
export default {
    data() {
        return {
            // 搜索框绑定数值
            Userdata: '',
            // 数据存储
            UsertableData: [],
            // 分页器绑定的请求数据
            Userlist: {
                _orderd: 'ctime',
                _page: 0,
                _size: 10,
                userId: ''
            },
            // 总条数
            total: 0,
            // 对话框的显示和隐藏
            dialogVisible: false,
            // 表单里的数据
            formdata: {
                epilogue: ''
            },
            rules: {
                epilogue: [
                    { required: true, message: '请输入考核结语', trigger: 'blur' },
                ]
            }
        }
    },
    created() {
        this.Userlist.userId = this.$route.params.id
        console.log(this.Userlist);
        this.getLearnList()
    },
    methods: {
        // 每页条数发生变化时
        handleSizeChange(val) {
            this.Userlist._size = val
            this.getNotice()
        },
        // 页码发生变化时
        handleCurrentChange(val) {
            this.Userlist._page = val
            this.getNotice()
        },
        // 确认学分按钮 
        Confirmedcredits() {
            this.dialogVisible = true
        },
        // 对话框里确认按钮
        addNoticefun() {
            this.$refs.ruleForm.validate(valid => {
                if (!valid) return
                this.addLearn()
                this.Closethewindow()
            })
        },
        // 关闭对话框
        Closethewindow() {
            this.dialogVisible = false
        },
        // 请求区😎😎😎😎😎
        // 列表数据渲染
        async getLearnList() {
            const { data } = await GetLearnList(this.Userlist)
            console.log(data);
            if (data.code !== 1) return this.$message.error('获取学习记录失败')
            // 数据赋值
            this.UsertableData = data.list
            // 总条数赋值
            this.total = data.pager.total
        },
        // 确认学分
        async addLearn() {
            this.formdata.id = this.$route.params.id
            const { data } = await AddLearn(this.formdata)
            console.log(data);
            if (data.code !== 1) return this.$message.error('确认学分失败')
            this.$message.success('确认学分成功')
            
        }
    }
}
</script>

<style scoped>
.marginright {
    margin-right: 20px !important;
    font-size: 12px;
}
</style>